<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy 2023!</title>
</head>
<style>
    #music-image{
            animation: rotateArround 3.5s linear 3s infinite alternate;
            -webkit-animation: rotateArround 3.5s linear 3s infinite alternate;
            -moz-animation: rotateArround 3.5s linear 3s infinite;
            -ms-animation: rotateArround 3.5s linear 3s infinite;
            -o-animation: rotateArround 3.5s linear 3s infinite;
        }
        
        @keyframes rotateArround {
            from {transform: rotateZ(0deg);}
            to {transform: rotateZ(360deg);}
        }

        @-webkit-keyframes rotateArround {
            from {-webkit-transform: rotate(0deg);
            }
            to {-webkit-transform: rotate(360deg);}
        }

        @-moz-keyframes rotateArround {
            from {-moz-transform: rotate(0deg);}
            to {-moz-transform: rotate(360deg);}
        }

        @-ms-keyframes rotateArround {
            from {-ms-transform: rotate(0deg);}
            to {-ms-transform: rotate(360deg);}
        }

        @-o-keyframes rotateArround {
            from {-o-transform: rotate(0deg);}
            to {-o-transform: rotate(360deg);}
        }
</style>
<body>
    <audio id="music" style="display: none" class="musicControl" autoplay="autoplay" loop="loop" preload="auto" controls="controls" src="./img/错季.mp3"></audio>
    <img id="music-image" style="position: fixed;z-index: 999;height:30px;right: 20px;top: 20px;" src="./img/cc.jpg" alt=""/>
</body>
<script src='./img/gameCanvas-4.0.js'></script>
<script  src="./img/script.js"></script>
<script>
    let musicImage = document.getElementById('music-image');
         let is = 1;
         musicImage.addEventListener('click', () => {
             let music = document.getElementById('music');
             if (is === 0) {
                 is = 1;
                 musicImage.src = './img/cd.jpg';
                 music.play();
             } else {
                 is = 0;
                 musicImage.src = './img/ca.jpg';
                 music.pause();
             }
         });
         if (typeof WeixinJSBridge == "undefined") {
             document.addEventListener('WeixinJSBridgeReady', function () {
                 document.getElementById('music').play();
             }, false);
         } else {
             WeixinJSBridge.invoke("getNetworkType", {}, function () {
                 document.getElementById('music').play();
             });
         }
         let play = document.addEventListener('touchstart',function () {
             let music = document.getElementById('music');
             music.muted=false;
             musicImage.src = './img/cd.jpg';
             document.removeEventListener('touchstart',play);
         });
</script>
</html>